<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
        function WebSocketTest() {
            if ("WebSocket" in window) {
                alert('您的浏览器支持WebSocket！')

                //打开一个 web socket  
                // 创建 WebSocket 对象
                // var Socket = new WebSocket(url, [protocol] );
                // 第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

                // 打开一个 web socket
                var ws = new WebSocket('ws://localhost:9998/echo')

                // 连接建立时触发
                ws.onopen = function () {
                    //webSocket已经连接上，使用send()方法发送数据
                    ws.send('发送数据')
                    alert('数据发送中...')
                }

                // 客户端接收服务端数据时触发
                ws.onmessage = function (evt) {
                    var received_msg = evt.data
                    alert('数据已接收...')
                }

                //关闭websocket
                ws.onclose = function () {
                    alert('连接已关闭')
                }
            }

            //浏览器不支持WebSocket
            else {
                alert('您的浏览器不支持WebSocket！')
            }

            // WebSocket 握手过程分析

            //    借用了 HTTP 协议来完成一部分握手

            //    GET / chat HTTP / 1.1   
            //    Host: server.example.com
            //    Upgrade: websocket                                 // WebSocket 的核心,告诉Apache/Nginx等服务器发起的请求要用 WebSocket协议.快点帮我找到对应的助理处理~而不是那个老土的 HTTP
            //    Connection: Upgrade                                // WebSocket 的核心,告诉Apache/Nginx等服务器发起的请求要用 WebSocket协议.快点帮我找到对应的助理处理~而不是那个老土的 HTTP
            //    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw ==   // Sec-WebSocket-Key 是一个 Base64 encode 的值，这个是浏览器随机生成的，告诉服务器：泥煤，不要忽悠我，我要验证你是不是真的是 WebSocket 助理
            //    Sec-WebSocket-Protocol: chat, superchat        // 用户定义的字符串，用来区分同 URL 下，不同的服务所需要的协议。简单理解：今晚我要服务A，别搞错啦~
            //    Sec-WebSocket-Version: 13                      // 告诉服务器所使用的 WebSocket Draft（协议版本）服务员，我要的是13岁的噢→_→
            //    Origin: http: //example.com

            //    然后服务器会返回下列东西，表示已经接受到请求， 成功建立 WebSocket 啦！

            //    HTTP / 1.1 101 Switching Protocols
            //    Upgrade: websocket                                     // 这里开始就是 HTTP 最后负责的区域了，告诉客户，我已经成功切换协议啦~
            //    Connection: Upgrade                                   // 这里开始就是 HTTP 最后负责的区域了，告诉客户，我已经成功切换协议啦~告诉客户端即将升级的是 WebSocket 协议，而不是 mozillasocket，lurnarsocket 或者 shitsocket。
            //    Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk =  // 经过服务器确认，并且加密过后的 Sec-WebSocket-Key 。 服务器：好啦好啦，知道啦，给你看我的 ID CARD 来证明行了吧。
            //    Sec-WebSocket-Protocol: chat                          // 表示最终使用的协议

            //    至此，HTTP 已经完成它所有工作了，接下来就是完全按照 WebSocket 协议进行了。
        }
    </script>

</head>

<body>
    <div id="sse">
        <a href="javascript:WebSocketTest()">运行 WebSocket</a>
    </div>
</body>

</html>